<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logo对比 - 优化前后效果</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            margin-bottom: 40px;
        }
        .comparison-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 40px;
        }
        .logo-item {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 45%;
        }
        .logo-item h2 {
            color: #666;
            margin-bottom: 20px;
        }
        .logo-display {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            background: #f9f9f9;
            border-radius: 8px;
        }
        .logo-display svg {
            width: 120px;
            height: 120px;
        }
        .changes-list {
            text-align: left;
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .changes-list h2 {
            color: #333;
            margin-bottom: 15px;
        }
        .changes-list ul {
            padding-left: 20px;
        }
        .changes-list li {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        .enhanced-logo {
            margin-top: 40px;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .enhanced-logo h2 {
            color: #333;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>Logo优化对比</h1>
    
    <div class="comparison-container">
        <div class="logo-item">
            <h2>原始Logo</h2>
            <div class="logo-display">
                <svg width="120" height="120" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="originalGradient" x1="0%" y1="20%" x2="100%" y2="80%">
                            <stop offset="0%" stop-color="#2563eb" stop-opacity="1" />
                            <stop offset="100%" stop-color="#60a5fa" stop-opacity="0.95" />
                        </linearGradient>
                        <filter id="originalShadow" x="-10%" y="-10%" width="120%" height="120%">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="1.2" />
                            <feOffset dx="0" dy="1.5" result="offsetblur" />
                            <feComponentTransfer>
                                <feFuncA type="linear" slope="0.25" />
                            </feComponentTransfer>
                            <feMerge>
                                <feMergeNode />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                    </defs>
                    <circle cx="32" cy="32" r="28.5" fill="url(#originalGradient)" filter="url(#originalShadow)" />
                    <circle cx="32" cy="32" r="10" fill="white" opacity="1" />
                    <circle cx="28" cy="28" r="3.5" fill="white" opacity="0.95" />
                    <circle cx="36" cy="36" r="2.5" fill="white" opacity="0.7" />
                    <circle cx="32" cy="32" r="14" fill="none" stroke="white" stroke-width="0.5" opacity="0.5" />
                </svg>
            </div>
        </div>
        
        <div class="logo-item">
            <h2>优化后Logo</h2>
            <div class="logo-display">
                <svg width="120" height="120" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <!-- 增强版logo设计 - 带渐变和纹理效果 -->
                    <defs>
                        <!-- 多层次蓝色彩谱渐变 -->
                        <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#1e40af" stop-opacity="1" />
                            <stop offset="30%" stop-color="#3b82f6" stop-opacity="0.95" />
                            <stop offset="70%" stop-color="#93c5fd" stop-opacity="0.9" />
                            <stop offset="100%" stop-color="#bfdbfe" stop-opacity="0.85" />
                        </linearGradient>
                        
                        <!-- 精致网格纹理图案 -->
                        <pattern id="subtleTexture" width="6" height="6" patternUnits="userSpaceOnUse">
                            <path d="M0 3h6M3 0v6" stroke="rgba(255,255,255,0.15)" stroke-width="0.5" />
                        </pattern>
                        
                        <!-- 增强的柔和阴影效果 -->
                        <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="1.8" />
                            <feOffset dx="0" dy="2.2" result="offsetblur" />
                            <feComponentTransfer>
                                <feFuncA type="linear" slope="0.28" />
                            </feComponentTransfer>
                            <feMerge>
                                <feMergeNode />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                        
                        <!-- 中心光晕效果 -->
                        <radialGradient id="centerGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                            <stop offset="0%" stop-color="white" stop-opacity="1" />
                            <stop offset="60%" stop-color="white" stop-opacity="0.8" />
                            <stop offset="100%" stop-color="white" stop-opacity="0.6" />
                        </radialGradient>
                    </defs>
                    
                    <!-- 主圆形背景 - 带阴影和精细纹理 -->
                    <circle cx="32" cy="32" r="28.5" fill="url(#logoGradient)" filter="url(#softShadow)" />
                    <circle cx="32" cy="32" r="27" fill="url(#subtleTexture)" opacity="0.5" />
                    
                    <!-- 中心圆点 - 优化的尺寸和光晕效果 -->
                    <circle cx="32" cy="32" r="10" fill="url(#centerGlow)" opacity="1" />
                    
                    <!-- 高级光影效果 - 增强的深度感 -->
                    <circle cx="27" cy="27" r="4" fill="white" opacity="0.95" />
                    <circle cx="38" cy="38" r="3" fill="white" opacity="0.7" />
                    <circle cx="25" cy="35" r="2" fill="white" opacity="0.6" />
                    
                    <!-- 多层次光晕效果 -->
                    <circle cx="32" cy="32" r="13" fill="none" stroke="white" stroke-width="0.8" opacity="0.6" />
                    <circle cx="32" cy="32" r="18" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.5" />
                </svg>
            </div>
        </div>
    </div>
    
    <div class="changes-list">
        <h2>优化的主要变化</h2>
        <ul>
            <li>将双色渐变升级为四色多层次蓝色彩谱渐变，增加了渐变的深度和视觉吸引力</li>
            <li>新增了精致的网格纹理图案，为logo添加了细节和质感</li>
            <li>增强了柔和阴影效果，扩大了阴影范围和模糊度，提升了立体感</li>
            <li>为中心圆点添加了光晕渐变效果，使其更加明亮和突出</li>
            <li>增加了更多的高光点，创造出更自然的光影层次</li>
            <li>添加了双层光晕效果，增强了整体的通透感</li>
        </ul>
    </div>
    
    <div class="enhanced-logo">
        <h2>进一步增强的Logo效果</h2>
        <div class="logo-display">
            <svg width="150" height="150" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 增强版logo设计 - 带渐变和纹理效果 -->
                <defs>
                    <!-- 更明显的蓝色彩谱渐变 -->
                    <linearGradient id="enhancedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" stop-color="#1e40af" stop-opacity="1" />
                        <stop offset="20%" stop-color="#2563eb" stop-opacity="1" />
                        <stop offset="60%" stop-color="#3b82f6" stop-opacity="0.95" />
                        <stop offset="100%" stop-color="#60a5fa" stop-opacity="0.9" />
                    </linearGradient>
                    
                    <!-- 更明显的网格纹理 -->
                    <pattern id="enhancedTexture" width="8" height="8" patternUnits="userSpaceOnUse">
                        <path d="M0 4h8M4 0v8" stroke="rgba(255,255,255,0.3)" stroke-width="0.8" />
                    </pattern>
                    
                    <!-- 更强的阴影效果 -->
                    <filter id="enhancedShadow" x="-25%" y="-25%" width="150%" height="150%">
                        <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" />
                        <feOffset dx="0" dy="3" result="offsetblur" />
                        <feComponentTransfer>
                            <feFuncA type="linear" slope="0.35" />
                        </feComponentTransfer>
                        <feMerge>
                            <feMergeNode />
                            <feMergeNode in="SourceGraphic" />
                        </feMerge>
                    </filter>
                    
                    <!-- 增强的中心光晕 -->
                    <radialGradient id="enhancedGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                        <stop offset="0%" stop-color="white" stop-opacity="1" />
                        <stop offset="40%" stop-color="white" stop-opacity="0.9" />
                        <stop offset="100%" stop-color="white" stop-opacity="0.5" />
                    </radialGradient>
                </defs>
                
                <!-- 主圆形背景 - 带强化阴影和纹理 -->
                <circle cx="32" cy="32" r="28.5" fill="url(#enhancedGradient)" filter="url(#enhancedShadow)" />
                <circle cx="32" cy="32" r="27" fill="url(#enhancedTexture)" opacity="0.7" />
                
                <!-- 中心圆点 - 强化光晕效果 -->
                <circle cx="32" cy="32" r="10" fill="url(#enhancedGlow)" opacity="1" />
                
                <!-- 明显的光影效果 -->
                <circle cx="26" cy="26" r="5" fill="white" opacity="0.95" />
                <circle cx="40" cy="40" r="3.5" fill="white" opacity="0.8" />
                <circle cx="24" cy="37" r="2.5" fill="white" opacity="0.7" />
                
                <!-- 增强的光晕效果 -->
                <circle cx="32" cy="32" r="13" fill="none" stroke="white" stroke-width="1" opacity="0.7" />
                <circle cx="32" cy="32" r="19" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="0.8" />
            </svg>
        </div>
        <p>此版本进一步增强了纹理清晰度、渐变对比度和光影效果，使变化更加明显。</p>
    </div>
</body>
</html>